<template>
  <div>
    <!-- 头部 -->
    <HomeHeader />
    <!-- 轮播 -->
    <div class="main">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" class="banner" />
        </van-swipe-item>
      </van-swipe>
      <!-- 分类 -->
      <van-grid :column-num="3" icon-size="40">
        <van-grid-item v-for="cate in cates" :key="cate.id" :icon="cate.icon" :text="cate.name" @click="enterList(cate.id)"/>
      </van-grid>
      <!-- 楼层 -->
      <Floors :floors="floors" @clickItem="enterDetail" @add_cart="add_cart"/>
      <!-- 底部标签栏 -->
      <van-tabbar :route="true" active-color="#f66">
        <van-tabbar-item to="/home">
          <span>首页</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="home"></van-icon>
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/cates">
          <span>分类</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="fenlei1"></van-icon>
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/cart">
          <span>购物车</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="icon-" :badge="cart.lists.length?cart.lists.length:''"></van-icon>
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/mine">
          <span>我的</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="wode01"></van-icon>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader'
import Floors from './components/Floors'
import { fetchBanner, fetchCarts, fetchItems } from '@api'
import addCart from '../../mixins/addCart'

export default {
  data () {
    return {
      banners: [],
      cates: [],
      floors: []
    }
  },
  created () {
    this.fetchBannerData()
    this.fetchCartsData()
    this.fetchItemsData()
  },
  mixins: [addCart],
  methods: {
    // 请求banner
    fetchBannerData () {
      fetchBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 请求分类
    fetchCartsData () {
      fetchCarts().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    // 请求商品列表
    fetchItemsData () {
      fetchItems().then((res) => {
        this.floors = res.data.data
      })
    },
    // 进入详情页
    enterDetail ({ index, id }) {
      // console.log(index,id)
      this.$router.push(`/detail/${id}`)
    },
    // 进入分类排序
    enterList (cateId) {
      this.$router.push(`/itemList/${cateId}`)
    }
  },
  components: {
    HomeHeader,
    Floors
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/common.css";
.banner {
  width: 100%;
}
</style>
